<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div class="swp">
        <div class="block">
            <el-carousel height="100vh" autoplay="false" loop="false" pause-on-hover>
                <el-carousel-item>
                    <img src="../../assets/image/start.png" alt="">
                </el-carousel-item>
                <el-carousel-item>
                    <img src="../../assets/image/guide1.png" alt="">
                </el-carousel-item>
                <el-carousel-item>
                    <img src="../../assets/image/guide2.png" alt="">
                </el-carousel-item>
                <el-carousel-item>
                    <img src="../../assets/image/guide3.png" alt="">
                </el-carousel-item>
                <el-carousel-item>
                    <img src="../../assets/image/guide4.png" alt="">
                </el-carousel-item>
                <el-carousel-item>
                    <router-link to="/home">
                        <img src="../../assets/image/guide5.png" alt="">
                    </router-link>
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
</template>
<script lang='ts' setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()


</script>
<style scoped lang="scss">
.swp {
    width: 100vw;
    height: 100vh;

    .block {
        width: 100vw;
        height: 100vh;

        img {
            width: 100%;
            height: 100%;
        }
    }
}
</style>